<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>pagehome</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        body{
            background: #F2F5F7;
            display: flex;
            flex-direction: column;
            background-size: cover;
            background-repeat: no-repeat;
        }
        img{
            width: 70px;
            height: 70px;
            border-radius: 50%;
        }
        .r1{
            flex-direction:column;
            flex-wrap: nowrap;

        }
        .page-header{
            color: #1a1a1a;
            font-weight: bold;
            flex-direction: row;
            justify-content: end;
        }
        .admin{
            color: blanchedalmond;
            animation-name: admin;
            animation-duration: 3s;
            animation-iteration-count: infinite;
            animation-delay: 10ms;

        }
        @keyframes admin {
            from{
                color:beige;
            }
            10%{
                color: brown;

            }
            50%{
                color: rgb(157, 19, 19);

            }
            80%{
                color: rgb(55, 73, 210);

            }90%{
                 color: rgb(22, 3, 3);

             }
            to{
                color: blue;
            }
        }
        #search{
            width: 100%;
        }
        #searchbox{
            width: 100%;
        }
        table{
            color: #4A235A;
            text-align: center;

        }
        #btn{
            width: 100%;

        }
        #btn:hover{
            background: #D1E8E2 ;
            color: white;
        }
        #motai{
            display: flex;
            flex-direction: column;
        }
      #infomation{
          width: 100%;
      }
      .r5{
          width: 100%;
        display: flex;
          flex-direction: column;
      }
.r5 button{
    width: 100%;
}

    </style>
</head>
<body>
<div class="r1">
    <div class="page-header">
        <h1>学生宿舍管理系统<small>欢迎您<small class="admin">admin</small> </small>   </h1>

    </div>

</div>
<div class="r2 container">

    <ul class="nav nav-pills">
        <li role="presentation" class="active"><a href="#">学生信息查询</a></li>
        <li role="presentation"><a href="#">宿舍信息查询</a></li>
        <li role="presentation"><a href="#">新增学生信息</a></li>
        <li role="presentation"><a href="#">新增宿舍信息</a></li>
    </ul>
</div>
<div class="r3 container">
    <form action="stuid" method="post">
        <div class="input-group input-group-lg  " id="searchbox">
            <div class="input-group search">
                <input id="search" type="text"  name="studentid" class="form-control" placeholder="输入学号查询">
                <span class="input-group-btn">
                        <button class="btn btn-primary" type="submit">查询</button>
                      </span>
            </div><!-- /input-group -->
        </div><!-- -->
    </form>
</div>



</div>
<div class="r4 container">

    <table class="table table-bordered">

        <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>学院</th>
            <th>年级</th>
            <th>手机号</th>
            <th>寝室</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>

           <c:forEach items="${requestScope.list}" var="stu" >

               <tr>

                   <td>${stu.studentid}</td>
                   <td>${stu.name}</td>
                   <td>${stu.cls}</td>
                   <td>${stu.grade}</td>
                   <td>${stu.phone}</td>
                   <td>${stu.home}</td>
                   <td>
                       <c:if test="${stu.state eq '1'}">
                           <strong style="color: darkgreen">在寝</strong>
                       </c:if>
                       <c:if test="${stu.state eq '0'}">
                           <strong style="color: crimson">异常</strong>
                       </c:if>
                   </td>
                       <%--                <td>--%>
                       <%--                    <button class="btn btn-primary " id="btn" data-toggle="modal" data-target="#myModal">--%>
                       <%--                        编辑--%>
                       <%--                    </button>--%>
                       <%--                </td>--%>

                   <td>无</td>
               </tr>
           </c:forEach>




        </tbody>

    </table>
    <div  class="r5">
        <span id="infomation" class="alert alert-danger" role="alert">如果查询不到 请检查您的学号是否输入正确</span>
        <button onclick="goback()" class="btn btn-primary">返回</button>
    </div>
</div>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        更新学生
                    </h4>
                </div>
                <div class="modal-body">
                    <!--更新表单-->
                    <div id="motai">
                        <form>
                            <input type="text" id="btn" placeholder="请输入您的学号">

                            <input type="text" id="btn" placeholder="修改的内容">
                        </form>
                    </div>
                    <div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-default"  data-dismiss="modal">关闭
                            </button>
                            <button type="button"  class="btn btn-primary">
                                提交更改
                            </button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>
            <script>
                function  go(){

                }
            </script>
            <script>
                function  goback(){
                    history.back(-1)
                }
            </script>
</body>
</html>